<template>
    <div class="userCotent">
                <div class="basicInfo pillrule">
                    <div>
                        <div class="box"><span style="float:left;color:#999;">出库信息</span>
                        <span>出库编号：</span></div>
                        <div><input type="text" style="width:320px;" disabled v-model='leaveWarehouseNumber'></div>
                    </div>
                     <div>
                        <div class="box"><span>出库时间：</span></div>
                        <div><input type="text" disabled v-model='leaveWarehouseDate'></div>
                    </div>
                    <div>
                        <div class="box"><span>发出方：</span></div>
                        <div><input type="text" style="width:320px;" disabled v-model='sendCompany'></div>
                    </div>
                     <div>
                        <div class="box"><span>出库类型：</span></div>
                        <div><input type="text" disabled v-model='leaveWarehouseType'></div>
                    </div>
                     <div>
                        <div class="box"><span>出库负责人：</span></div>
                        <div><input type="text" disabled v-model='leaveWarehouseManager'></div>
                    </div>
                </div>
                   <div class="basicInfo">
                    <div>
                        <div class="box"><span style="float:left;color:#999;">收货方信息</span>
                        <span>收货方名称：</span></div>
                        <div><input type="text" style="width:320px;" disabled v-model='name'></div>
                    </div>
                     <div>
                        <div class="box"><span>收货方地址：</span></div>
                        <div><input type="text" style="width:320px;" disabled v-model='sendCompany'></div>
                    </div>
                    <div>
                        <div class="box"><span>联系电话：</span></div>
                        <div><input type="text" disabled v-model='sendCompany'></div>
                    </div>
        </div>

    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                leaveWarehouseNumber: '',
                leaveWarehouseDate: '',
                sendCompany: '',
                leaveWarehouseType: '',
                leaveWarehouseManager: '',
                name: '',
                address: '',
                telephone: '',
                leaveWarehouseId: this.$store.state.stockManage.leaveWarehouseId
            }
        },
        filters: {

        },
        created: function() {
            this.getDetailInfo();
        },
        methods: {
            getDetailInfo: function() {
                this.$store.commit('showLoading');
                this.getStockInfoLeaveDetailInfo({
                    leaveWarehouseId: this.leaveWarehouseId
                }).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        let distributor = data.data.distributor,
                            leaveWarehouse = data.data.leaveWarehouse;
                        this.leaveWarehouseNumber = leaveWarehouse.leaveWarehouseNumber;
                        this.leaveWarehouseDate = this.formatDate(leaveWarehouse.leaveWarehouseDate);
                        this.sendCompany = leaveWarehouse.sendCompany;
                        this.leaveWarehouseType = this.formWarehouseType(leaveWarehouse.leaveWarehouseType);
                        this.leaveWarehouseManager = leaveWarehouse.leaveWarehouseManager;
                        this.name = distributor.name;
                        this.address = distributor.address;
                        this.telephone = distributor.telephone;
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg))
            },
            // 格式化日期
            formatDate(date) {
                if (date == null || date == '' || date == undefined) {
                    return '-';
                } else {
                    let y, m, d, h, i, s,
                        t = new Date(parseInt(date));
                    y = t.getFullYear()
                    m = t.getMonth() + 1
                    d = t.getDate()
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
                }
            },
            // 出库类型
            formWarehouseType(data) {
                switch (Number(data)) {
                    case 1:
                        return '销售出库'
                        break;
                    case 2:
                        return '销毁出库'
                        break;
                    case 3:
                        return '零售出库'
                        break;
                }
            },
            ...mapActions(['getStockInfoLeaveDetailInfo'])
        }
    }

</script>
<style scoped>
    .userCotent {
        margin-top: 10px;
        background: #fff;
        height: calc(100vh - 150px);
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
    .userCotent>div {
        padding: 30px 0 30px 40px;
        border-bottom: 1px solid #DDD;
    }
    
    .userCotent>div:nth-child(2) {
        border-bottom: none;
    }
    
    .userCotent>div>div>div {
        float: left;
        padding-left: 40px;
    }
    
    .userCotent input {
        width: 160px;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
        padding-left: 10px;
        background-color: #fff;
    }
    
    .userNav>div:nth-child(1) {
        height: 25px;
        display: flex;
        margin-left: 35px;
        align-items: center;
    }
    
    .userNav>div:nth-child(1) input {
        background: #43dce7;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        margin-left: 60px;
        width: 80px;
        height: 32px;
    }
    
    .userNav>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT {
        width: 360px;
        display: flex;
        align-items: center;
        margin-right: 45px;
    }
    
    .userNavT>div:nth-child(1) {
        display: flex;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        height: 34px;
        padding: 5px 10px;
        width: 360px;
        justify-content: space-between;
    }
    
    .userNavT>div:nth-child(1) input {
        border: none;
        outline: none;
        width: 100%;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) img {
        width: 20px;
        height: 20px;
    }
    
    .userNavT>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) div span {
        padding: 0!important;
    }
    
    .userNavT>div:nth-child(2) {
        color: #888;
        font-size: 14px;
        cursor: pointer;
    }
    
    input {
        font-size: 14px
    }
    
    .datails {
        border: 1px solid #dddddd;
        width: 100%;
        background: #fff;
        min-width: 1289px;
    }
    
    .basicInfo>div {
        margin: 20px 0;
        overflow: hidden;
    }
    
    .box {
        width: 280px;
        height: 32px;
        line-height: 32px;
    }
    
    .box span {
        float: right;
        color: #333;
    }
    
    .box input {
        padding: 0 5px;
        margin-left: 40px;
    }
    
    .el-date-editor.el-input {
        width: 182px;
        position: absolute;
        top: -2px;
        left: -1px;
    }
    
    .el-select {
        position: absolute;
        top: -2px;
        left: -1px;
    }
    
    .pickBox {
        height: 32px;
        width: 180px;
        overflow: hidden;
        position: relative;
        border: 1px solid #dddddd;
        border-radius: 5px;
        margin-left: 40px;
    }
    
    .selectPickBox1 {
        width: 160px;
    }
    
    .selectPickBox2 {
        width: 320px;
    }
    
    .selectPickBox1,
    .selectPickBox2 {
        height: 32px;
        overflow: hidden;
        position: relative;
        border: 1px solid #dddddd;
        border-radius: 5px;
        margin-left: 40px;
    }
    
    .selectPickBox1 .el-select {
        width: 162px;
    }
    
    .selectPickBox2 .el-select {
        width: 322px;
    }
    
    .button {
        width: 150px;
        color: #fff;
        background: #43dce7;
        border-radius: 5px;
        margin-left: 323px;
        height: 32px;
        border: none;
    }

</style>
